<template>
	<view>
		<gui-a-header title="用户信息"></gui-a-header>
		<view class="main">
			<view class="title-img flex-ac">
				<image src="../../static/image/userInfo.png" mode="widthFix" style="height: auto;"></image>
				<text class="f26 gui-bold">用户信息</text>
			</view>
			<view class="row gui-flex gui-space-between gui-align-items-center f24 mt30">
				<view class="label c333">
					头像<text class="c999">（建议使用真人照片）</text>
				</view>
				<view class="val" @click="open">
					<!-- <image class="tx_image" src="../../static/logo.png" mode="aspectFit"></image> -->
					<gui-image :src="userInfo.avatarUrl" :width="144" :height="144"
						borderRadius="144rpx" mode="aspectFit"></gui-image>
				</view>
			</view>
			<view class="row gui-flex gui-space-between gui-align-items-center f24">
				<view class="label c333">
					用户名
				</view>
				<view class="val c666" @click="open">
					{{userInfo.nickName}}
				</view>
			</view>
			<!-- <view class="row gui-flex gui-space-between gui-align-items-center f24">
				<view class="label c333">
					ID
				</view>
				<view class="val c666">
					（自动生成）
				</view>
			</view> -->
		</view>
		<userInfoComponents ref="userInfoComponentsRef" @sumbit="userHandle"></userInfoComponents>
	</view>
</template>

<script setup>
	import userInfoComponents from '@/components/user-info/user-info.vue'
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	
	const userInfoComponentsRef = ref(null)
	
	const store = useUserStore()
	const {
		isHideTabbar,
		userInfo,
		isLogin
	} = storeToRefs(store)
	
	const $u = reactive(inject('$u'))
	
	const open = () => {
		userInfoComponentsRef.value.handleOpen();
		userInfoComponentsRef.value.setDefult(userInfo.value)
	}
	
	const userHandle = async () => {
		userInfoComponentsRef.value.handleClose();
	}
</script>

<style lang="scss">
	.main {
		padding: 30rpx 43rpx;
	}
	
	.tx_image {
		width: 115rpx;
		height: 115rpx;
	}
	
	.row {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #EBEBEB;
	}
</style>